<template>
	<view class="index">

		<!-- 自定义头部导航栏 -->
		<uni-nav-bar backgroundColor="rgba(0,0,0,0)" statusBar fixed :border="false" leftWidth="0rpx" rightWidth="0rpx"
			height="85px">
			<view class="index-nav">
				<view class="index-nav__bgradius"></view>
				<view class="index-nav__title"
					:style="'height:' + customHeight + 'px;line-height:' + customHeight + 'px'">
					<view>生鲜速达</view>
					<view v-if="typeA==2 && shopName" @click="memberShow = !memberShow"
						style="position: absolute;top: 0;left: 0;font-size: 27rpx;font-weight: 400;display: flex;align-items: center;">
						<view style="margin-right: 6rpx;">{{shopName}}</view>
						<u-icon v-if="memberShow" name="arrow-up-fill" size="13px" color="#fff"></u-icon>
						<u-icon v-else name="arrow-down-fill" size="13px" color="#fff"></u-icon>
					</view>
				</view>
				<view class="index-nav__search" @click="toSearch">
					<view class="index-nav__search__left">
						<image class="index-nav__search__icon" mode="widthFix" :src="$imgUrl('/index/icon-search.png')">
						</image>
						<view class="index-nav__search__text">请输入商品名</view>
					</view>
					<view class="index-nav__search__right">搜索</view>
				</view>
			</view>
		</uni-nav-bar>


		<!-- 轮播图 -->
		<swiper class="swiper" :circular="circular" :indicator-dots="indicatorDots" :autoplay="autoplay"
			:interval="interval" :duration="duration" :indicator-color="indicatorColor"
			:indicator-active-color="indicatorActiveColor" :disable-touch="disableTouch">
			<swiper-item v-for="(item, index) in swiperList" :key="index">
				<image class="swiper-item" :src="item" mode="heightFix"></image>
			</swiper-item>
		</swiper>
		<!-- <view class="index-list__choice__title">
			<image mode="widthFix" :src="$imgUrl('/index/icon-choice.png')"></image>
			<view>精选推荐</view>
		</view> -->
		<!-- 精选推荐列表 -->
		<!-- <view class="index-list__choice">
			<view class="index-list__choice__title">
				<image mode="widthFix" :src="$imgUrl('/index/icon-choice.png')"></image>
				<view>精选推荐</view>
			</view>
			
			<goods-list :listData="listData" :ishome="true"></goods-list>
		</view> -->
		<!-- <view style="background-color: #fff;">
			<u-tabs :list="tabList" :scrollable="false"></u-tabs>
		</view> -->
		<!-- 首页分类 -->
		<u-sticky :offsetTop="offsetTop">
			<u-tabs :list="tabList" :scrollable="false" lineColor="#2FCC71" itemStyle="height:50px"
				@change="changeTab"></u-tabs>
		</u-sticky>
		<!-- 商品列表 -->
		<view class="item-list">
			<goods-list :listData="listData" :ishome="true"></goods-list>
		</view>
		<view v-if="memberShow" class="member-con" :style="'top:' + memberHeight + 'px'" @click="memberShow = false">
			<view class="member-list">
				<scroll-view scroll-y="true" style="height: calc(100vh - 300px);">
					<view style="padding: 31rpx 0;border-bottom: 1px solid #d8d8d8;" v-for="(item,index) in memberList"
						:key="item.id" @click.stop="selectShop(item)">
						<view style="padding: 0 31rpx;font-size: 27rpx;">
							{{item.shopName}}
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import goodsList from '@/components/goodsList.vue'
	export default {
		components: {
			goodsList
		},
		data() {
			return {
				memberHeight: 0,
				memberShow: false,
				typeA: "",
				shopName: '',
				memberList: [],
				ck: '',
				customHeight: '', // 胶囊高度
				indicatorDots: true, // 是否显示面板指示点
				autoplay: true, // 是否自动切换
				interval: 2000, // 自动切换时间间隔
				duration: 500, // 滑动动画时长
				circular: true, // 是否采用衔接滑动，即播放到末尾后重新回到开头
				indicatorColor: 'rgba(255,255,255,0.5)', // 指示点颜色
				indicatorActiveColor: '#FFFFFF', // 当前选中的指示点颜色
				disableTouch: true, // 是否禁止用户 touch 操作
				swiperList: [ // 轮播图图片
					'https://bhzhtc.oss-cn-beijing.aliyuncs.com/ministatic/index/swiper-2.png'
				],
				loadMore: true,
				pageNum: 1,
				pageSize: 20,
				listData: [], // 精选推荐列表数据
				shopType: '',
				trec: 1,
				rec: '',
				tabList: [{
						name: '今日爆款',
						type: ''
					},
					{
						name: '精选水果',
						type: '71'
					},
					{
						name: '精选蔬菜',
						type: '72'
					},
				]
			}
		},
		onReady() {
			// 胶囊高度
			this.customHeight = uni.getMenuButtonBoundingClientRect().height
			const statusBarHeight = uni.getSystemInfoSync().statusBarHeight
			this.memberHeight = this.customHeight + statusBarHeight + 10

		},
		computed: {
			offsetTop() {
				console.log(uni.getSystemInfoSync().statusBarHeight + 84);
				return Number(uni.getSystemInfoSync().statusBarHeight + 84)
			}
		},
		onLoad() {
			this.ck = uni.getStorageSync('ck') || ''
			this.typeA = uni.getStorageSync('typeA') || ''
			if (this.typeA == 2) {
				this.getMemberList()
			} else {
				this.getList()
			}

			this.getFirstTab()

		},
		// 下拉刷新
		onPullDownRefresh() {
			uni.showNavigationBarLoading()
			this.refresh()
			uni.hideNavigationBarLoading()
			uni.stopPullDownRefresh()
		},
		// 上拉加载更多
		onReachBottom() {
			if (this.loadMore) {
				this.pageNum = this.pageNum + 1
				this.getList()
			}
		},
		onShareAppMessage() {
			return {
				title: '',
				path: '',
				imageUrl: 'https://bhzhtc.oss-cn-beijing.aliyuncs.com/sxsd/02bf6940b575427ab033a732306b0d02.png'
			}
		},
		methods: {
			async getMemberList() {
				const res = await this.$apis.goods.getMember()
				this.memberList = res.data
				this.shopName = uni.getStorageSync('shopName') || ''
				if (this.memberList.length) {
					if (!this.shopName) {
						this.shopName = this.memberList[0].shopName
						uni.setStorageSync('openidA', this.memberList[0].openid)
						uni.setStorageSync('shopName', this.memberList[0].shopName)
					}
				}
				this.getList()

			},
			selectShop(item) {
				this.shopName = item.shopName
				uni.setStorageSync('openidA', item.openid)
				uni.setStorageSync('shopName', item.shopName)
				this.memberShow = false
				this.getList()
			},
			async getFirstTab() {
				const data = await this.$apis.goods.getFirst()
				// this.firstTab = data.data
				this.tabList[1].name = data.data[0].name
				this.tabList[1].type = data.data[0].type
				this.tabList[2].name = data.data[1].name
				this.tabList[2].type = data.data[1].type
			},
			// 获取
			refresh() {
				this.loadMore = true
				this.listData = []
				this.pageNum = 1
				this.getList()
			},
			//选择分类
			changeTab(e) {
				console.log(e);
				if (e.type === '') {
					this.trec = 1
					this.rec = ''
				} else {
					this.trec = ''
					this.rec = 1
				}
				this.shopType = e.type
				this.loadMore = true
				this.listData = []
				this.pageNum = 1
				this.getList()
			},
			// 获取精选推荐列表
			async getList() {
				const data = await this.$apis.goods.goodsList({
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					type1: this.shopType,
					rec: this.rec,
					trec: this.trec
				})
				this.listData = [...this.listData, ...data.rows]
				if (this.listData.length >= data.total) {
					this.loadMore = false
				}
			},
			// 去搜索页面
			toSearch() {
				uni.navigateTo({
					url: '/pages/index/search/index'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.index {
		width: 100vw;
		min-height: 100vh;
		background-color: #edf1f1;

		.index-nav {
			width: 100%;

			.index-nav__bgradius {
				width: 292rpx;
				height: 232rpx;
				border: 98rpx solid rgba(47, 204, 113, 0.36);
				position: absolute;
				left: -20%;
				top: -95%;
				border-radius: 50%;
			}

			.index-nav__title {
				position: relative;
				font-size: 34rpx;
				font-weight: bold;
				color: #FFFFFF;

				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;
				z-index: 100;
			}

			.index-nav__search {
				width: 710rpx;
				height: 64rpx;
				background: #FFFFFF;
				border-radius: 32rpx;
				margin-top: 20rpx;
				position: relative;
				z-index: 100;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.index-nav__search__left {
					display: flex;
					align-items: center;
				}

				.index-nav__search__icon {
					width: 40rpx;
					height: 40rpx;
					display: block;
					margin-left: 24rpx;
					margin-right: 8rpx;
				}

				.index-nav__search__text {
					width: 156rpx;
					height: 36rpx;
					font-size: 26rpx;
					color: #999999;
					line-height: 36rpx;

				}

				.index-nav__search__right {
					width: 116rpx;
					height: 56rpx;
					background: #2FCC71;
					border-radius: 31rpx;
					font-size: 26rpx;
					color: #FFFFFF;
					margin-right: 4rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}

		// 轮播图样式

		.swiper {
			width: 100%;
			height: 291rpx;
		}

		.swiper-item {
			// width: 100%;
			height: 291rpx;
			display: block;
		}

		.item-list {
			width: 100%;
			// padding: 0 19px;
			box-sizing: border-box;
			margin-top: 24rpx;
		}

		.index-list__choice__title {
			display: flex;
			align-items: center;
			padding: 32rpx 19rpx;
			box-sizing: border-box;
			// background-color: #FFFFFF;

			image {
				width: 42rpx;
				height: 42rpx;
				display: block;
				margin-right: 2rpx;
			}

			view {
				font-size: 30rpx;
				font-weight: bold;
				color: #333333;
			}
		}

		// 精选推荐列表

		.index-list__choice {
			width: 702rpx;
			// background: #FFFFFF;
			// border-radius: 16rpx;
			margin-top: -12rpx;
			height: 100rpx;
			position: relative;
			z-index: 100;
			padding: 0 24rpx;


		}
	}

	::v-deep .u-tabs {
		background-color: #FFFFFF;
	}

	.member-con {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: 9999;
	}

	.member-list {
		width: 100vw;
		height: calc(100vh - 300px);
		background: #FFFFFF;

	}
</style>
<style lang="scss">
	.uni-navbar {
		position: relative;
	}

	.uni-navbar__content {
		background: linear-gradient(177deg, #3CE482 0%, #2FCC71 100%);
	}

	.uni-navbar__header-container {
		padding: 0 !important;
	}
</style>